<template>
	<!-- 20221028 -->
	<view class="image-advertise-cn width-100p">

		<!-- 组件内容 -->
		<view class="cn-content">
			<!-- 上方图片 -->
			<view v-if="listTop.length">
				<image class="image long" :src="listTop[0].image" mode="aspectFill" @click="go(listTop[0].url)">
				</image>
			</view>

			<!-- 下方图片,最多3张 -->
			<view class="margin-top-10" v-if="listBottom.length">
				<!-- 下方图片仅有1张 一张横图 -->
				<view v-if="listBottom.length == 1">
					<image class="image long" :src="listBottom[0].image" mode="aspectFill" @click="go(listBottom[0].url)">
					</image>
				</view>

				<!-- 下方图片仅有2张 左右结构-->
				<view class="overflow-hidden" v-if="listBottom.length == 2">
					<image class="fl image half" :src="listBottom[0].image" mode="aspectFill"
						@click="go(listBottom[0].url)">
					</image>
					<image class="fr image half" :src="listBottom[1].image" mode="aspectFill"
						@click="go(listBottom[1].url)">
					</image>
				</view>

				<!-- 下方图片仅有3张 -->
				<view class="overflow-hidden" v-if="listBottom.length == 3">
					<image class="fl image half" :src="listBottom[0].image" mode="aspectFill"
						@click="go(listBottom[0].url)">
					</image>
					<view class="fr half">
						<image class="image small" :src="listBottom[1].image" mode="aspectFill"
							@click="go(listBottom[1].url)"></image>
						<image class="margin-top-10 image small" :src="listBottom[2].image" mode="aspectFill"
							@click="go(listBottom[2].url)"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 组件浮层 -->
		<view class="cn-layer">

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 广告图
			list: {
				type: Object,
				default: {}
			},
			// 当 list 是一个 Array 时，通过 该参数 来指定 Object 中 key 的值作为广告图的图片
			listKey: {
				type: String,
				default: 'image'
			},
			// 当 list 是一个 Array 时，通过 该参数 来指定 Object 中 key 的值作为广告图的链接地址
			listUrlKey: {
				type: String,
				default: 'link_url'
			},
		},
		
		computed: {
			// 上方图片，最多1张，可不传
			listTop() {
				let array = []
				for (let i = 0; i < this.list.top.length; i++) {
					let obj = {}
					if (this.listKey) {
						obj.image = this.list.top[i][this.listKey]
					} else {
						obj.image = this.list.top[i]
					}
					if (this.listUrlKey) {
						obj.url = this.list.top[i][this.listUrlKey]
					} else {
						obj.url = ''
					}
					array.push(obj)
				}
				return array
			},
			
			// 下方图片，最多3张，可不传
			listBottom() {
				let array = []
				for (let i = 0; i < this.list.bottom.length; i++) {
					let obj = {}
					if (this.listKey) {
						obj.image = this.list.bottom[i][this.listKey]
					} else {
						obj.image = this.list.bottom[i]
					}
					if (this.listUrlKey) {
						obj.url = this.list.bottom[i][this.listUrlKey]
					} else {
						obj.url = ''
					}
					array.push(obj)
				}
				return array
			}
		},
		
		methods: {

			/**
			 * 点击图片跳转链接
			 * @param {Object} url
			 * @date 2022-10-28
			 */
			// clickImg(url) {
			// 	if (!url) {
			// 		return false
			// 	}
			// 	// http跳转url /pages跳转内部页面
			// 	let str = url.substring(0, 4)
			// 	if (str == 'http') {
			// 		uni.setStorageSync('webview_url', url)
			// 		uni.navigateTo({
			// 			url: '/pages/common/webview'
			// 		})
			// 	} else if (str == '/pag') {
			// 		uni.navigateTo({
			// 			url: url
			// 		})
			// 	}
			// }
		}
	}
</script>

<style scoped>
	.image {
		display: block;
		border-radius: 10rpx;
	}

	.long {
		width: 690rpx;
		height: 200rpx;
	}

	.half {
		width: 340rpx;
		height: 370rpx;
	}

	.small {
		width: 340rpx;
		height: 180rpx;
	}
</style>
